<template>
  <div class="flexbox">
    <!-- 几个并排的元素 -->
    <div class="flexson">
      <p>{{ time }}</p>
      <p>{{ data }}</p>
    </div>
    <div class="flexson">
      <div class="blockbox">
        <img src="http://cdn.hustzjc.top/视角旋转对齐.svg" class="pic1">
        <span>转角：
          <i style="font-size:0.4rem;color:#00f2f1;text-decoration:underline;font-weight: bold;">{{ cornor }}</i>
          <i style="font-size:0.2rem;color:#00f2f1;font-weight: bold;"> /84</i>
          度</span>
      </div>
    </div>
    <div class="flexson">
      <div class="noblockbox">
        <img src="http://cdn.hustzjc.top/转速表,仪表盘,测速,速度.svg" class="pic1" style="margin-left:0.15rem;">
        <span>转速：
          <i style="font-size:0.4rem;color:#00f2f1">{{ speedrate }}</i>
         °/min</span>
      </div>
    </div>
    <div class="flexson">
      <div class="noblockbox">
        <img src="http://cdn.hustzjc.top/距离测量.svg" class="pic1" >
        <span>偏轴距离：
          <i style="font-size:0.4rem;color:#00f2f1">{{ displacement }}</i>
         mm</span>
      </div>
    </div> 
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
  data() {
    return {
      time: "",
      data:"",
      timer:null,
      timerate:5000,
    };
  },
  // vuex数据引入
  computed:{
    ...mapState([
    'cornor',
    'displacement',
    'speedrate'
    ])
  },
  methods: {
     // 数据处理函数
    ...mapMutations(["getspeedrate"]),
    gettime() {
      var that = this
      time()
      that.timer = setInterval(time, 1000);
      function time() {
        let dt = new Date();
        let y = dt.getFullYear();
        let mt = dt.getMonth() + 1;
        let day = dt.getDate();
        let h = dt.getHours(); //获取时
        h = h < 10 ? '0' + h : h;
        let m = dt.getMinutes(); //获取分
        m = m < 10 ? '0' + m : m;
        let s = dt.getSeconds(); //获取秒
        s = s < 10 ? '0' + s : s;
        that.time = h + ":" + m + ":" + s;
        that.data = y + "-" + mt + "-" + day ;
      }
    },
  },
  created(){
    // 开启定时器
    this.gettime()
  },
  beforeDestroy(){
    clearInterval(this.timer);
    this.timer=null
  }

};
</script>

<style>
</style>